<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="../css/materialize.min.css" media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        .nav-left{
            padding-left: 82px;
        }
        /*img{*/
            /*width: 128px;*/
            /*!*height: 128px;*!*/
            /*margin: 8px;*/
        /*}*/
        #logo{
            padding-left: 18px;
        }
    </style>
</head>

<body>

<nav>
    <div class="nav-wrapper blue">
        <a href="/toInformation" class="brand-logo" id="logo">呜呼</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down " style="margin-left: 82px">
            <li><a href="#">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
        </ul>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="/toContact"><i class="material-icons">chat_bubble_outline</i></a></li>
            <li><a href="/toPersonalCenter"><i class="material-icons">perm_identity</i></a></li>
            <li><a href="#"><i class="material-icons">more_vert</i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo" style="z-index: 10000">
            <li><a href="#">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
            <li><a href="/toContact">联系人</a></li>
            <li><a href="/toPersonalCenter">个人中心</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <!--<div class="col s12 m6"> -&#45;&#45;&#45;&#45;1-->
        <!--<div class="card horizontal"> &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;2-->
            <!--<div class="card-image col s12 m6">-->
                <!--<img class="responsive-img" src="../img/main1.jpg">-->
            <!--</div>-->
            <!--<div class="card-stacked col s12 m6 toDetail"> -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;3-->
                <!--<div class="card-content"> &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;4-->
                    <!--<span class="card-title flow-text">你见过哪位五官是硬伤，却美的很惊艳的人？</span>-->
                    <!--<p>电影《门徒》中古天乐与张静初饰演的吸毒夫妻，连现实中的“瘾君子”都怀疑他们是真的在吸毒，就因为演绎的太有真实感。而其中张静初最后因注射毒品而亡的恐怖场面，一度成为很多人的心理阴影。其实在现实生活中注射毒品死亡的案例并不少，随着身体对毒品耐受性的提高，吸毒者为了追求之前的效果，以及更直接的快感，吸毒者往往会选择对身体伤害更大的静脉注射，当然这也等于宣告自己已经进入死亡倒计时。-->
                        <!--作者：陈敏-->
                        <!--链接：https://zhuanlan.zhihu.com/p/36437825-->
                        <!--来源：知乎-->
                        <!--著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。电影《门徒》中古天乐与张静初饰演的吸毒夫妻，连现实中的“瘾君子”都怀疑他们是真的在吸毒，就因为演绎的太有真实感。</p>-->
                <!--</div>-->

                <!--<div class="card-action col s12 m6"> &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;5-->
                    <!--<a style="vertical-align: bottom">进入问题</a>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

<form style="visibility: hidden" action="/questions/getByIdToDetail" method="post" id="sendForm">
    <input id="sendId" name="id">
</form>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script>
    $(window).resize(function () {
        if(window.innerWidth<992){
            $(".card").removeClass("horizontal")
        }else{
            $(".card").addClass("horizontal")
        }
    });

    $(document).ready(function(){
        $.ajax({
            url : '/questions/getAll',
            type : "get",
            dataType : "json",
            success : function(data, textStatus, jqXHR) {
                if ('success' == textStatus) {
                    // alert("success");
                    console.log(data);
                    for (let i = 0;i < data.length;i++){
                        var id = data[i]._id;
                        var title = data[i].title;
                        var content = data[i].content;

                        var div1 = document.createElement("div");
                        div1.setAttribute("class","col s12 m6");
                        // div1.innerHTML = ""
                        var div2 = document.createElement("div");
                        div2.setAttribute("class","card horizontal");
                        div2.innerHTML = "<div class=\"card-image col s12 m6\">\n" +
                            "                <img class=\"responsive-img\" src=\"../img/main1.jpg\">\n" +
                            "            </div>";
                        var div3 = document.createElement("div");
                        div3.setAttribute("class","card-stacked col s12 m6 toDetail");
                        div3.setAttribute("name",id);
                        var div4 = document.createElement("div");
                        div4.setAttribute("class","card-content");
                        var span = document.createElement("span");
                        span.setAttribute("class","card-title flow-text");
                        span.innerHTML = title;
                        var p = document.createElement("p");
                        p.innerHTML = content;
                        var div5 =document.createElement("div");
                        div5.setAttribute("class","card-action col s12 m6");
                        div5.innerHTML = "<a style=\"vertical-align: bottom\">进入问题</a>";
                        //开始拼接
                        div4.appendChild(span);
                        div4.appendChild(p);
                        div3.appendChild(div4);
                        div3.appendChild(div5);
                        div2.appendChild(div3);
                        div1.appendChild(div2);
                        document.getElementsByClassName("container")[0].appendChild(div1);
                    }


                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                 alert("error");
            }
        });

        $(".container").on("click",".toDetail",function () {
            var id = $(this).attr("name");
            $("#sendId").attr("value",id);
            $("#sendForm").trigger("submit");
        });

        $("#sidenav").sideNav();
        $(".button-collapse").sideNav({draggable: true});
        $("#leftnavbar").on("click",function () {
            $('.button-collapse').sideNav('hide');
        });


    });


</script>
</body>
</html>